<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>与木共舞板材网-列表</title>
    <link rel="stylesheet" href="../../css/weui.css">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <section id="app">
        <nav class="demand-list-title" ref="nav">
            <span @click="getListData(0)" :class="{'active':active==0}">全部</span>
            <span @click="getListData(1)" :class="{'active':active==1}">供应</span>
            <span @click="getListData(2)" :class="{'active':active==2}">求购</span>
        </nav>
        <section v-show="listData.length" class="demand-list" :style="{height:height}" ref="wrapper">
            <ul>
                <li class="demand-list-item" v-for="item in listData">
                    <div :style="{backgroundImage:'url(' + item.imgSrc + ')'}"></div>
                    <div>
                        <h3>{{item.title}}</h3>
                        <dl>
                            <dt>{{item.address}}</dt>
                            <dd>{{item.create_time}}</dd>
                        </dl>
                        <p>{{item.describe}}</p>
                    </div>
                </li>
                <li v-show="!more" class="demand-list-no">没有更多数据了</li>
            </ul>
        </section>
        <section v-show="!listData.length">
            <div class="demand-list-nodata">
                <img src="../../img/nolist.png" alt="没有更多数据了">
                <p>暂无相关内容</p>
            </div>
        </section>
        <aside>
            <z-toast :show="isToast" :msg="toast" loading="loading"></z-toast>
        </aside>
    </section>
    <!-- js -->
    <aside>
        <script src="../../js/template.js"></script>
        <script src="../../js/bscroll.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    active: 0,
                    isToast: true,
                    toast: '正在加载',
                    loading: true,
                    listData: [],
                    height: null,
                    more: false,
                    scroll: null,
                    page: 1
                },
                mounted() {
                    this._getListData()
                    this._setScrollHeight()
                },
                methods: {
                    getListData(status) {
                        if (this.active == status) return false
                        this.active = status
                        this.isToast = true
                        if (status == 1) {
                            this.isToast = false;
                            this.listData = []
                        }else{
                            this.listData = []
                            setTimeout(() => {
                                this._getListData();
                            }, 200)
                        }
                    },
                    _getListData() {
                        let listData = []
                        for (let i = 0; i < 10; i++) {
                            listData.push({
                                id: i,
                                imgSrc: '../../img/noimg.jpg',
                                title: '求购3*6尺、4*8尺二手热压机',
                                address: '【山东省临沂市】',
                                create_time: '2019-01-09',
                                describe: '我公司压机二手热压机二手热压机我期大量高价收购二手热压机'
                            })
                        }
                        this.listData = listData;
                        this.$nextTick(function () {
                            this._scroll();
                            this.isToast = false;
                        })
                    },
                    _scroll() {
                        let wrapper = this.$refs.wrapper;
                        this.scroll = new BScroll(wrapper, {
                            scrollY: true,
                            click: true,
                        })

                        this._pullingUp()
                    },
                    _setScrollHeight() {
                        const htmlHeight = document.documentElement.clientHeight;
                        const navHeight = this.$refs.nav.offsetHeight;
                        const height = htmlHeight - navHeight;
                        this.height = height + 'px'
                    },
                    _pullingUp() {
                        this.scroll.on('scrollEnd', () => {
                            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                                this.isToast = true;
                                setTimeout(() => {
                                    this.isToast = false;
                                    // this.scroll.refresh()
                                }, 200)
                            }
                        })
                    }
                },
            })
        </script>
    </aside>
    <!-- js -->
</body>

</html>